<template>
  <div id="sbChar" style="width:100%;height:100%"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    setTimeout(() => {
      this.getChars();
    }, 200);
  },
  methods: {
    getChars() {
      var myChart = this.$echarts.init(document.getElementById("sbChar"));
      var dataSXT = [
        [0, 310, 117, 157, 3.05, 92, 58, "良"],
        [1, 510, 117, 157, 3.05, 92, 58, "良"],
        [2, 210, 117, 157, 3.05, 92, 58, "良"],
        [3, 710, 117, 157, 3.05, 92, 58, "良"],
        [4, 510, 117, 157, 3.05, 92, 58, "良"],
        [5, 310, 117, 157, 3.05, 92, 58, "良"],
        [6, 210, 117, 157, 3.05, 92, 58, "良"],
        [7, 110, 117, 157, 3.05, 92, 58, "良"]
      ];

      var dataMJ = [
        [0, 210, 37, 27, 1.163, 27, 13, "优"],
        [1, 310, 37, 27, 1.163, 27, 13, "优"],
        [2, 110, 37, 27, 1.163, 27, 13, "优"],
        [3, 410, 37, 27, 1.163, 27, 13, "优"],
        [4, 610, 37, 27, 1.163, 27, 13, "优"],
        [5, 210, 37, 27, 1.163, 27, 13, "优"],
        [6, 410, 37, 27, 1.163, 27, 13, "优"],
        [7, 310, 37, 27, 1.163, 27, 13, "优"]
      ];

      var dataJK = [
        [0, 380, 45, 125, 0.82, 34, 23, "良"],
        [1, 280, 45, 125, 0.82, 34, 23, "良"],
        [2, 480, 45, 125, 0.82, 34, 23, "良"],
        [3, 580, 45, 125, 0.82, 34, 23, "良"],
        [4, 680, 45, 125, 0.82, 34, 23, "良"],
        [5, 780, 45, 125, 0.82, 34, 23, "良"],
        [6, 880, 45, 125, 0.82, 34, 23, "良"],
        [7, 180, 45, 125, 0.82, 34, 23, "良"]
      ];

      var dataETC = [
        [0, 100, 800, 1, 1.2, 222222, 33333, "良"],
        [1, 400, 800, 1, 1.2, 222222, 33333, "良"],
        [2, 500, 800, 1, 1.2, 222222, 33333, "良"],
        [3, 600, 800, 1, 1.2, 222222, 33333, "良"],
        [4, 700, 800, 1, 1.2, 222222, 33333, "良"],
        [5, 100, 800, 1, 1.2, 222222, 33333, "良"],
        [6, 200, 800, 1, 1.2, 222222, 33333, "良"],
        [7, 500, 800, 1, 1.2, 222222, 33333, "良"]
      ];

      var itemStyle = {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: "rgba(0,0,0,0.3)"
      };

      let option = {
        title: {
          text: "设备分布",
          textStyle: {
            color: "#cbd7fa",
            fontSize: this.$fontSize(0.16) //字体大小
          }
        },
        // 加滚动条
        dataZoom: [
          {
            show: false,
            realtime: true,
            start: 0,
            end: 80
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 80
          }
        ],
        color: ["#E94C58", "#F58B52", "#3478FF", "#0AD49B"],
        legend: {
          right: "2%",
          itemWidth: this.$fontSize(0.15),
          itemHeight: this.$fontSize(0.15),
          data: ["摄像头", "门禁", "监控", "ETC"],
          textStyle: {
            color: "#fff",
            fontSize: this.$fontSize(0.10) //字体大小
          }
        },
        grid: {
          top: "22%",
          left: "0%",
          right: "0",
          bottom: "0%",
          containLabel: true // 包含刻度文字在内
        },
        xAxis: {
          type: "category",
          nameGap: 16,
          nameTextStyle: {
            fontSize: 16
          },
          data: ["A1", "A2", "B1", "B2", "C1", "C2", "D1", "D2"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#FFFFFF",
              fontSize: this.$fontSize(0.19) //字体大小
            },
            interval: 0 //代表显示所有x轴标签显示
            // rotate: 45 //代表逆时针旋转45度
          },
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          nameLocation: "end",
          nameGap: 20,
          nameTextStyle: {
            fontSize: 16
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#FFFFFF",
              fontSize: this.$fontSize(0.19) //字体大小
            },
            interval: 0 //代表显示所有x轴标签显示
            // rotate: 45 //代表逆时针旋转45度
          },
          splitLine: {
            show: false
          }
        },
        visualMap: [
          {
            left: "right",
            dimension: 2,
            min: 0,
            show: false,
            max: 250,
            itemWidth: 30,
            itemHeight: 120,
            calculable: true,
            inRange: {
              symbolSize: [10, 30]
            }
          },
          {
            left: "right",
            dimension: 6,
            min: 0,
            max: 50,
            show: false,
            itemHeight: 120,
            inRange: {
              colorLightness: [0.9, 0.5]
            }
          }
        ],
        series: [
          {
            name: "摄像头",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataSXT
          },
          {
            name: "门禁",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataMJ
          },
          {
            name: "监控",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataJK
          },
          {
            name: "ETC",
            type: "scatter",
            itemStyle: itemStyle,
            data: dataETC
          }
        ]
      };
      var twChart = this.$echarts.init(document.getElementById("sbChar"));
      twChart.setOption(option);
      setTimeout(function() {
        window.onresize = function() {
          twChart.resize();
        };
      }, 200);
      myChart.setOption(option);
    }
  }
};
</script>

<style lang="less">
#sbChar {
  div {
    width: 100% !important;
    height: 100% !important;
  }
}
</style>